<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>量子入口 | Modern Portal</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <style>
    :root {
      --primary: #00f7ff;
      --secondary: #0066ff;
      --accent: #00ff9d;
      --bg: #0a0e1a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: #fff;
      overflow-x: hidden;
      position: relative;
    }

    #particle-canvas {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .container {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 3rem;
      padding: 4rem;
      opacity: 0;
      animation: matrixIn 2s 1s forwards;
    }

    /* 量子加载动画 */
    .quantum-loader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: var(--bg);
      z-index: 9999;
      display: grid;
      place-items: center;
    }

    .quantum-spinner {
      width: 120px;
      height: 120px;
      position: relative;
      animation: quantumSpin 3s infinite linear;
    }

    .quantum-spinner::before,
    .quantum-spinner::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 30px;
      background: var(--primary);
      border-radius: 50%;
      filter: drop-shadow(0 0 10px var(--primary));
    }

    .quantum-spinner::before {
      top: 0;
      left: 45px;
      animation: particleFloat 2s infinite ease-in-out;
    }

    .quantum-spinner::after {
      bottom: 0;
      right: 45px;
      animation: particleFloat 2s infinite ease-in-out reverse;
    }

    /* 主内容区 */
    .main-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      perspective: 2000px;
    }

    /* 入口卡片 */
    .portal-card {
      background: rgba(255, 255, 255, 0.02);
      padding: 2.5rem;
      border-radius: 20px;
      border: 1px solid rgba(0, 255, 255, 0.1);
      backdrop-filter: blur(15px);
      position: relative;
      overflow: hidden;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      cursor: pointer;
    }

    .portal-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, var(--primary), transparent);
      animation: rotate 4s linear infinite;
      opacity: 0.1;
    }

    .portal-card::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: rgba(10, 14, 26, 0.9);
      border-radius: 18px;
    }

    .portal-content {
      position: relative;
      z-index: 1;
    }

    .portal-card h2 {
      color: var(--accent);
      font-size: 2.2rem;
      margin-bottom: 1.5rem;
      background: linear-gradient(45deg, var(--primary), var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* 特殊入口区块 */
    .gateway-links {
      position: sticky;
      top: 4rem;
      height: calc(100vh - 8rem);
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .gateway {
      flex: 1;
      background: rgba(0, 103, 255, 0.1);
      border: 2px solid var(--primary);
      border-radius: 15px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all 0.4s ease;
      position: relative;
      overflow: hidden;
    }

    .gateway::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      background: conic-gradient(
              var(--primary) 0deg,
              transparent 120deg,
              var(--secondary) 240deg,
              transparent 360deg
      );
      animation: borderSpin 6s linear infinite;
    }

    .gateway-content {
      position: relative;
      z-index: 1;
      background: rgba(10, 14, 26, 0.9);
      padding: 1.5rem;
      border-radius: 10px;
      text-align: center;
    }

    .gateway h3 {
      color: var(--accent);
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }

    .gateway p {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
    }

    /* 交互特效 */
    .gateway:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 40px rgba(0, 199, 255, 0.2);
    }

    .portal-card:hover {
      transform: scale(1.02) rotateX(5deg);
      box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
    }

    /* 高级动画 */
    @keyframes matrixIn {
      0% {
        opacity: 0;
        filter: hue-rotate(90deg);
        transform: scale(0.95);
      }
      100% {
        opacity: 1;
        filter: hue-rotate(0);
        transform: scale(1);
      }
    }

    @keyframes quantumSpin {
      to { transform: rotate(360deg) }
    }

    @keyframes particleFloat {
      0%, 100% { transform: translateY(0) }
      50% { transform: translateY(-20px) }
    }

    @keyframes borderSpin {
      to { transform: rotate(360deg) }
    }

    @keyframes portalGlow {
      0% { box-shadow: 0 0 10px var(--primary) }
      50% { box-shadow: 0 0 30px var(--accent) }
      100% { box-shadow: 0 0 10px var(--primary) }
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .container {
        grid-template-columns: 1fr;
        padding: 2rem;
      }

      .gateway-links {
        position: static;
        height: auto;
        margin-top: 3rem;
      }
    }
  </style>
</head>
<body>
<canvas id="particle-canvas"></canvas>

<!-- 量子加载动画 -->
<div class="quantum-loader">
  <div class="quantum-spinner"></div>
</div>

<div class="container">
  <!-- 主入口网格 -->
  <div class="main-grid">
    <div class="portal-card">
      <div class="portal-content">
        <h2>HTML5文字动画特效DEMO</h2>
        <p>以下是一篇300字的HTML5文字动画特效DEMO介绍：

          HTML5文字动画特效DEMO 展示了现代Web技术如何赋予文字动态生命力。该示例融合CSS3动画、SVG滤镜与JavaScript交互，呈现六种前沿文字特效：

          ​粒子重组动画：文字由散落粒子汇聚成型，通过WebGL计算实现物理学模拟效果
          ​全息投影特效：运用CSS混合模式与模糊滤镜，配合光影渐变制造科幻感悬浮投影
          ​路径描边动画：SVG路径绘制结合stroke-dashoffset特性，实现书法式逐笔书写效果
          ​三维翻转交互：通过Three.js创建3D文字模型，支持鼠标拖拽视角旋转
          ​流体渐变过渡：基于CSS自定义属性与三角函数计算，实现波浪形颜色渐变流动
          ​语音驱动动画：集成Web Speech API，文字尺寸随语音输入音量实时波动
          技术亮点包括：

          采用CSS Houdini Paint API实现自定义渐变绘制
          使用Web Animation API实现精准时间轴控制
          通过Intersection Observer实现滚动视差动画
          整合GSAP库优化动画性能，确保60FPS流畅运行
          该DEMO兼容现代浏览器，适配移动端触控交互，提供参数调节面板供开发者实时调试动画属性。既适合作为登录页视觉焦点，也可用于数据可视化标题的动态展示，展现HTML5技术在动态排版领域的强大可能性。</p>
      </div>
    </div>
    <div class="portal-card">
      <div class="portal-content">
        <h2>电子雨</h2>
        <p>
          好的，我现在需要处理用户关于“电子雨html代码介绍300字”的请求。用户之前已经有过关于HTML5动画特效的讨论，现在他们想要一个关于电子雨效果的HTML代码介绍。首先，我需要理解用户的具体需求。他们可能希望了解如何用HTML、CSS和JavaScript实现类似电影《黑客帝国》中的绿色字符雨效果，或者类似的数字瀑布动画。

          接下来，我要考虑用户的使用场景。他们可能是前端开发者、学生，或者对网页特效感兴趣的人。如果是开发者，可能需要详细的代码结构和实现原理；如果是学生，可能需要更基础的解释。不过用户要求的是300字的介绍，所以需要简洁明了，涵盖主要技术点和效果描述。

          用户的历史对话显示他们之前询问过文字动画特效和Three.js的应用，所以可能对JavaScript动画库有一定了解。这次他们提到“电子雨”，可能需要结合Canvas或CSS动画来实现。需要确定使用哪种技术更合适。通常，电子雨效果使用Canvas，因为它处理大量动态元素更高效。

          然后，我需要分析用户可能未明说的需求。他们可能希望代码是可定制的，比如调整字符颜色、下落速度等参数。或者需要兼容现代浏览器，响应式设计。此外，用户可能关注代码的结构和注释是否清晰，方便理解和修改。

          接下来，我需要组织内容结构。300字的介绍应包括技术实现、主要特性、应用场景和自定义选项。首先介绍使用Canvas和JavaScript生成效果，然后说明动态创建字符、随机速度、颜色渐变等特性。接着提到应用场景，如科技主题网站的背景，最后提到可调节参数。

          需要注意避免技术术语过多，保持语言简洁。同时，要确保涵盖关键点，如Canvas绘图、定时器、随机数生成、颜色渐变和事件交互。可能需要提到使用ASCII字符模拟数字雨，以及如何优化性能，比如避免重绘整个画布，使用requestAnimationFrame优化动画流畅度。

          最后，检查是否符合用户要求：300字左右，介绍电子雨HTML代码，保持专业但易懂。确保没有使用Markdown格式，用自然的中文口语化表达，分段落结构清晰。同时，确保信息准确，比如正确描述代码结构和实现方法，避免错误的技术细节。




          以下是一篇300字的电子雨效果HTML代码实现介绍：

          ---

          **电子雨特效**通过Canvas与JavaScript结合，模拟经典黑客帝国风格的数字瀑布效果。核心代码分为三部分：

          1. **Canvas绘图基础**
          创建全屏画布，设置绿色渐变字体样式。通过canvas标签建立绘图区域，使用`ctx.fillStyle`定义半透明绿色到纯绿的字符渐变颜色。

          2. **雨滴粒子系统**
          构造雨滴对象数组，每个粒子包含：
          • 随机生成的ASCII字符（48-126码）
          • 随机下落速度（3-10px/frame）
          • 动态Y轴坐标
          通过`Math.random()`实现位置、速度的随机分布，模拟自然坠落效果。

          3. **动画引擎**
          使用`requestAnimationFrame`驱动60FPS动画循环：
          ① 绘制半透明黑色背景层制造拖影效果
          ② 遍历粒子数组更新位置并重绘字符
          ③ 每帧生成新雨滴补充超出画布的元素

          **特性增强**：
          • 鼠标交互：捕捉移动坐标生成涟漪状粒子扩散
          • 性能优化：采用对象池复用技术减少内存消耗
          • 响应式布局：监听resize事件自动适配屏幕尺寸

          该效果适用于：
          • 科技主题网站背景
          • 数据可视化界面装饰
          • 创意登录页面动效

          通过调整以下参数可改变视觉效果：
          ```javascript
          const config = {
          CHAR_SET: "01", // 字符集
          FONT_SIZE: 18,   // 字体尺寸
          COLUMN_SPACE: 20,// 列间距
          OPACITY: 0.15    // 背景透明度
          };
          ```

          （字数：298）
        </p>
      </div>
    </div>

  </div>

  <!-- 特殊入口通道 -->
  <div class="gateway-links">
    <a href="/one" class="gateway">
      <div class="gateway-content">
        <h3>HTML5文字动画特效DEMO</h3>
        <p>Canvas粒子效果</p>
      </div>
    </a>
    <a href="/two" class="gateway">
      <div class="gateway-content">
        <h3>电子雨</h3>
        <p>探索全息投影技术矩阵</p>
      </div>
    </a>
  </div>
</div>

<script>
  // 粒子背景初始化
  function initParticles() {
    const canvas = document.getElementById('particle-canvas');
    const renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
      alpha: true
    });
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

    // 创建量子粒子
    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];

    for(let i = 0; i < 5000; i++) {
      positions.push(
              (Math.random() - 0.5) * 10,
              (Math.random() - 0.5) * 10,
              (Math.random() - 0.5) * 10
      );

      colors.push(
              0.2 + Math.random() * 0.8,
              0.5 + Math.random() * 0.5,
              1.0
      );
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

    const material = new THREE.PointsMaterial({
      size: 0.05,
      vertexColors: true,
      transparent: true,
      opacity: 0.8,
      sizeAttenuation: true
    });

    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    camera.position.z = 5;

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      particles.rotation.x += 0.001;
      particles.rotation.y += 0.002;

      const positions = geometry.attributes.position.array;
      for(let i = 0; i < positions.length; i += 3) {
        positions[i] += (Math.random() - 0.5) * 0.01;
        positions[i+1] += (Math.random() - 0.5) * 0.01;
        positions[i+2] += (Math.random() - 0.5) * 0.01;
      }

      geometry.attributes.position.needsUpdate = true;

      renderer.render(scene, camera);
    }

    // 响应式处理
    function resize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    window.addEventListener('resize', resize);
    resize();
    animate();
  }

  // 初始化
  document.addEventListener('DOMContentLoaded', () => {
    initParticles();

    // 加载完成后隐藏量子加载器
    setTimeout(() => {
      document.querySelector('.quantum-loader').style.display = 'none';
    }, 3000);
  });

  // 入口交互特效
  document.querySelectorAll('.gateway').forEach(portal => {
    portal.addEventListener('mouseenter', () => {
      portal.style.transform = `scale(1.05) rotateZ(${Math.random() * 4 - 2}deg)`;
    });

    portal.addEventListener('mouseleave', () => {
      portal.style.transform = 'scale(1) rotateZ(0)';
    });

    portal.addEventListener('click', () => {
      portal.style.animation = 'portalGlow 0.6s ease-out';
      setTimeout(() => {
        portal.style.animation = '';
      }, 600);
    });
  });
</script>
</body>
</html>